<template>
  <div class="number-select" v-if="!getIsPhone">
    <ab-options 
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      :showIntegrate="showIntegrate"
      @on-msg="updateOptionsState"
    ></ab-options>
    <fastchoose-buttons-tema 
      @click="handleFastChoose"
      v-show="showFastChooseButtons"
      >
    </fastchoose-buttons-tema>
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area" v-if="!showIntegrate">
      <lottery-box-sebo-phone
        :item="getCurrentLotteryState[0]"
        @click="handleUpdateData"
        class="select-row-adjust-first"
        :activeSwitchIndex="activeSwitchIndex"
      ></lottery-box-sebo-phone>
      <lottery-box-sebo-phone
        v-for="item in getCurrentLotteryState.slice(1)"
        :item="item"
        :key="item.id"
        @click="handleUpdateData"
        class="select-row-adjust"
        :activeSwitchIndex="activeSwitchIndex"
      ></lottery-box-sebo-phone>
    </div>
  </div>
  <div v-else class="number-select-phone">
    <ab-options 
      ref='ab'
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      @on-msg="updateOptionsState"
    ></ab-options>
    <lottery-box-sebo-phone
      :item="getCurrentLotteryState[0]"
      @click="handleUpdateData"
      class="select-row-adjust-first"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-sebo-phone>
    <lottery-box-sebo-phone
      v-for="item in getCurrentLotteryState.slice(1)"
      :item="item"
      :key="item.id"
      @click="handleUpdateData"
      class="select-row-adjust"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-sebo-phone>
    <fastchoose-buttons-tema-phone 
      @click="handleFastChoose"
      v-show="showFastChooseButtons"
      @close="hideFastChooseButtons"
      >
    </fastchoose-buttons-tema-phone>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import AbOptions from '@/components/ab-options/ab-options'
import LotteryBoxSeboPhone from '@/components/lottery-type/common/lottery-box-sebo-phone'
import FastchooseButtonsTema from '@/components/base/fastchoose-buttons/fastchoose-buttons-tema'
import FastchooseButtonsTemaPhone from '@/components/base/fastchoose-buttons/fastchoose-buttons-tema-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    AbOptions,
    LotteryBoxSeboPhone,
    FastchooseButtonsTema,
    FastchooseButtonsTemaPhone
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
      // 快速选号（整合/快捷选号）
      options: [
        {
          id: 'fastchoose',
          name: '快捷选号',
          disabled: false
        }
      ],
       // 快速选择
      showButtons: false,
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false,     
      // 默认a面
      activeSwitchIndex: 0,
      // 是否显示整合 
      showIntegrate: false,
      showFastChooseButtons: false
    }
  },
  methods: {
    updateOptionsState(item) {
      if (item.id == 'integrate') {
        if (item.active) {
          this.showIntegrate = true
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = true
            }
          })
        } else {
          this.showIntegrate = false
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = false
            }
          })
        }
      } else {
        if (item.active) {
          this.showFastChooseButtons = true
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = true
            }
          })
        } else {
          this.showFastChooseButtons = false
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = false
            }
          })
        }
      }
    },
    // ab面高亮
    updateIndex(index) {
      this.activeSwitchIndex = index
    },
    handleFastChoose(conditions) {
      let item = this.cloendCurrentLotteryState[0]
      let numbers = item.numbers
      switch(conditions) {
          case '红':
            numbers.forEach(number => {
              number.selected = number.color == 'red' ? true : false
            })
          break;
          case '绿':
            numbers.forEach(number => {
              number.selected = number.color == 'green' ? true : false
            })
          break;
          case '蓝':
            numbers.forEach(number => {
              number.selected = number.color == 'blue' ? true : false
            })
          break;
          case '红大': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && number.number >= 25) ? true : false
            })
          break;
          case '红小': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && number.number < 25) ? true : false
            })
          break;
          case '红单': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && (number.number % 2 !== 0 )) ? true : false
            })
          break;
          case '红双': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && (number.number % 2 == 0)) ? true : false
            })
          break;
          default:
            numbers.forEach(number => {
              number.selected = false
            })
        }
      this.handleUpdateData(item)
    },
    // closeFastChoosePanel() {
    //   this.$refs.ab.$children.forEach((item, index) => {
    //     if (index > 0) {
    //       item.selected = false
    //     }
    //   })
    //   this.options.forEach(item => {
    //     if(item.id == 'integrate') {
    //       item.disabled = false
    //     }
    //   })
    //   this.showFastChooseButtons = false
    // },
    hideFastChooseButtons() {
      this.$refs.ab.$children.forEach((item, index) => {
        if (index > 0) {
          item.selected = false
        }
      })
      this.options.forEach(item => {
        if(item.id == 'integrate') {
          item.disabled = false
        }
      })
      this.showFastChooseButtons = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .select-row-adjust-first >>> .select-row 
    justify-content space-between
    .sebo-box 
      width calc((100% - 40px) / 3)
  .select-row-adjust >>> .select-row 
    // justify-content space-between
    .sebo-box 
      width calc((100% - 40px) / 4) 
      margin-right 13px
      &:nth-child(4n + 4)
        margin-right 0
@media screen and (max-width 750px) 
  .select-row-adjust-first >>> .select-row 
    .sebo-box 
      width 100% !important
  .select-row-adjust >>> .select-row 
    justify-content space-between
    padding-right 10px
    .sebo-box 
      margin 0 !important
      margin-bottom 10px !important 
      width calc((100% - 10px) / 2) !important
</style>